<template>
  <el-form
    :label-position="labelPosition"
    label-width="80px"
    :model="form"
    :rules="rulesBasicAccount"
    ref="ruleForm"
  >
    <el-form-item label="用户姓名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="手机号码" prop="mobilePhone">
      <el-input v-model="form.mobilePhone"></el-input>
    </el-form-item>
    <el-form-item label="电子邮箱" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="rePassword">
      <el-input type="password" v-model="form.rePassword"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      default: {},
    },
  },
  data() {
    var regUserName = (rule, value, callback) => {
      const reg = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("汉字、字母、数字的组合"));
      }
    };
    var regPhone = (rule, value, callback) => {
      const HK_PATTERN = /^(5|6|8|9)\d{7}$/;
      const CHINA_PATTERN =
        /^((13[0-9])|(14[0,1,4-9])|(15[0-3,5-9])|(16[2,5,6,7])|(17[0-8])|(18[0-9])|(19[0-3,5-9]))\d{8}$/;
      if (HK_PATTERN.test(value) || CHINA_PATTERN.test(value)) {
        callback();
      } else {
        callback(new Error("错误手机号码（内陆、香港）"));
      }
    };

    var regEmail = (rule, value, callback) => {
      const EMAIL_ENGLISH_PATTERN =
        /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
      const EMAIL_CHINESE_PATTERN =
        /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (
        EMAIL_ENGLISH_PATTERN.test(value) ||
        EMAIL_CHINESE_PATTERN.test(value)
      ) {
        callback();
      } else {
        callback(new Error("邮箱格式不正确"));
      }
    };
    var regPassword = (rule, value, callback) => {
      const reg = /^(?=.*[A-Z])(?=.*?[a-z])(?=.*[0-9])(?=.*[\\p{Punct}]).{6,}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(
          new Error(
            "至少一个数字 一个小写字母 一个大写字母 和 一个特殊符号 至少8位"
          )
        );
      }
    };
    var checkPassword = (rule, value, callback) => {
      // eslint-disable-next-line eqeqeq
      if (value !== this.form.password) {
        callback(new Error("两次密码不一样，请重新输入"));
      } else {
        callback();
      }
    };

    return {
      labelPosition: "left",
      rulesBasicAccount: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { validator: regUserName, trigger: "blur" },
        ],
        mobilePhone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: regPhone, trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: regEmail, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: regPassword, trigger: "blur" },
        ],
        rePassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: checkPassword, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //子组件校验，传递到父组件
    validateForm() {
      let flag = null;
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          flag = true;
        } else {
          flag = false;
        }
      });
      return flag;
    },
  },
};
</script>

<style scoped>
.el-input /deep/ .el-input__inner {
  background-color: rgba(255, 255, 255, 0.247);
}

</style>